<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas {
                border-bottom: 10px solid #333;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" width="1200" height="500"></canvas>
        <script type="text/javascript">
            var myCanvas = document.getElementById("canvas");
            var ctx = myCanvas.getContext("2d");
            var x = 10,y = 10;
            var g = 9.8 / 100,
                t = -0.85,
                v = 0;
            function freeFall() {
                ctx.clearRect(0, 0, 1200, 500);
                ctx.beginPath();
                ctx.arc(x, y, 10, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.fillStyle = "red";
                ctx.fill();
                v += g;
                y += v;
                x += 1;
                if(y >= myCanvas.height - 10) {
                    y = myCanvas.height - 10;
                    v *= t;
                }
                if(x >= 1190) {
                    x = 1190;
                    window.location.reload()
                }
                window.requestAnimationFrame(freeFall);
            }
            freeFall()
        </script>
    </body>

</html>